import Vue from "vue";
import Vuex from "vuex";

// 引入递归路由的方法
import recursionRoutes from "@/utils/recursionRoutes";
// 引入所有的路由
import allRoutes from "@/router/generateRoutes";

// 引入动态路由
import dynamicRoutes from "@/router/dynamicRoutes";
import router from "@/router";
import * as permissionApi from "@/api/permission";
import * as api from "@/api/users";
// 引入持久化存储
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userMenu: [],
    userInfo: {}, // 用户信息
    currentProduct: {}, // 当前充值的产品对象
    breadCrumb: [], // 面包屑数据
    dialogVisible: false, // 控制dialog显示隐藏值
    dialogTitle: "增加学员信息", // 控制dialog的标题
    stuData: [], // 表格的数据对象
    loading: true, // 控制加载动画
    dialogFormVisible: false, //控制dialog显示隐藏的值
    currentRow: {}, //编辑的时候,dialog回显的表格数据
    stuTotal:0, // 总条数
    stuPageSize:10,  //每页显示的数量
  },
  getters: {},
  mutations: {
    // 表格显示loading动画
    SHOW_LOADING(state) {
      state.loading = true;
    },
    // 表格关闭loading动画
    HIDE_LOADING(state) {
      state.loading = false;
    },

    // 设置学员项目管理表格中的数据
    SET_STU_DATA(state, payload) {
      state.stuData = payload.data;  // 设置学员列表
      state.loading = false;   // 关闭加载动画
      // console.log(payload);
      state.stuTotal = payload.total  // 设置学员分页总数
    },
    // 显示dialog
    SHOW_DIALOG(state) {
      state.dialogFormVisible = true;
    },
    // 隐藏dialog
    HIDE_DIALOG(state) {
      state.dialogFormVisible = false;
    },
    // 修改dialog标题信息
    CHANGE_DIALOG_TITLE(state, payload) {
      state.dialogTitle = payload;
    },
    // 修改dialog回显数据
    SET_CURRENT_ROW(state, payload) {
      state.currentRow = { ...payload };
    },

    // 设置用户菜单
    SET_MENULIST(state, payload) {
      state.userMenu = [...payload]; // 浅拷贝

      // 动态添加路由，引入dynamic路由，进行匹配，匹配到path === '/' 这个对象，让我们的用户路由（userMenu）的结果，成为这个对象的children
      let target = dynamicRoutes.find((route) => route.path === "/");

      target.children = [...target.children, ...payload];

      // 动态的将路由添加到根路由routes选项中

      // router.addRoute 动态添加路由，参数是一个对象，这个对象必须符合routes的配置
      router.addRoute(target);
    },
    // 修改用户信息
    SET_USERINFO(state, payload) {
      state.userInfo = payload;
    },
    // 设置当前充值的产品
    SET_CURRENT_PRODUCT(state, payload) {
      state.currentProduct = payload;
    },
    // 设置面包屑数据
    SET_BREADCRUMB(state, payload) {
      state.breadCrumb = payload;
    },
  },
  actions: {
    // 请求菜单数据，根据菜单数据
    // 1.计算出角色(role)的菜单
    // 2.计算出当前这个角色的合法路由
    async FETCH_MENULIST(context, payload) {
      // 获取用户菜单
      return permissionApi.getMenuList().then((res) => {
        // console.log(res);
        // 后端返回的菜单数据
        let { menuList } = res.data;
        // 调用recursionRoutes
        let userRoutes = recursionRoutes(allRoutes[0].children, menuList);
        // console.log(userRoutes);
        // 让mutation进行处理
        context.commit("SET_MENULIST", userRoutes); // 被劫持了
      });
    },
    // 获取学员列表
    GET_STULIST({ commit }, payload = {}) {
      // 解构传递的参数
      commit("SHOW_LOADING");
      let { page = 1, count = 10, classes = "" } = payload;
      api.getStuListApi(page, count, classes).then((res) => {
        console.log(res);
        commit("SET_STU_DATA", res.data);
      });
    },
  },
  modules: {},
  /* vuex数据持久化配置 */
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.localStorage,
      // 存储的 key 的key值
      key: "lorre",
      paths: ["userInfo", "currentProduct"],
    }),
  ],
});
